<template>
	<view class="page">
		<view class="box">
			<view style="text-align: center;margin-bottom: 250rpx;">
				<image :showLoading="true" src="@/static/log.png" width="80px" height="80px"></image>
				<view style="clear: both;margin-bottom: 20rpx;"></view>
				<text>则秀运动</text>
			</view>


			<view v-if='!StorageOpenid' class='width-160'>
				<u-button :disabled='disabled' open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"
					iconColor="#fff" text="一键登录" color=" rgb(66, 83, 216)"></u-button>
			</view>
			<view v-else class='width-160'>
				<u-button :disabled='disabled' iconColor="#fff" text="一键登录" color=" rgb(66, 83, 216)"
					@click='getCode'></u-button>
			</view>
			<view style="position: relative;" @click="jump" class='width-160'>
				<u-button :disabled='disabled'>
					<image src="@/static/image/phone.png" style="width: 40rpx;height: 40rpx;vertical-align:middle;">
					</image>手机验证码登陆
				</u-button>
			</view>
			<view style="position: relative;" @click="$utils.back()" class='width-160'>
				<u-button :disabled='disabled'>
					暂不登录
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StorageOpenid: uni.getStorageSync('openid'),
				loginCode: '',
				disabled: false,
				Phone: null,
				openid: null,
				unionid: null,
			}
		},
		mounted() {

		},
		methods: {
			jump() {
				uni.redirectTo({
					url: '/Login/phoneLoginPage'
				})
			},
			onGetPhoneNumber(e) {
				if (!e.detail.code) return
				this.disabled = true
				

				this.Phone = e.detail
				this.getCode()
			},
			getCode() {
				this.disabled = true
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (loginRes) => {
						this.loginCode = loginRes.code
						this.getOpenidAndSession()
					},
					fail: (err) => {
						console.log(err, 'fail')
						this.disabled = false
						uni.hideLoading()
					}
				});
			},
			getOpenidAndSession() {
				uni.showLoading({
					title: '登录中...',
				})
				this.$api.Login.Session({
					code: this.loginCode
				}).then(res => {
					if (this.StorageOpenid) {
						this.loginSilent()
						return
					}
					this.openid = res.data.openid
					this.unionid = res.data.unionid
					this.login()
				}).catch(err => {
					this.disabled = false
					uni.hideLoading()
				})
			},
			login() {
				wx.getUserInfo({
					success: resUser => {
						this.$api.Login.Mobile({
							openid: this.openid,
							unionid: this.unionid,
							code: this.Phone.code,
							iv: this.Phone.iv,
							encryptedData: this.Phone.encryptedData,
							rawData: resUser.rawData,
							signature: resUser.signature,
							userInfo: {
								...resUser.userInfo
							},
						}).then(res => {
							uni.setStorageSync('openid', this.openid);
							uni.setStorageSync('token', res.data.token);
							this.getDetail()
						}).catch(err => {
							this.disabled = false
							uni.hideLoading()
						})
					}
				})
			},
			loginSilent() {
				wx.getUserInfo({
					success: resUser => {
						this.$api.Login.Silent({
							openId: uni.getStorageSync('openid'),
							rawData: resUser.rawData,
							signature: resUser.signature,
							encryptedData: resUser.encryptedData,
							iv: resUser.iv
						}).then(res => {
							uni.setStorageSync('token', res.data.token);
							this.getDetail()
						}).catch(err => {
							this.disabled = false
							uni.hideLoading()
						})
					}
				})
			},
			getDetail(){
				this.$api.My.Detail().then(my => {
					uni.setStorageSync('user', my.data);
					uni.reLaunch({
						url: uni.getStorageSync('pageUrl')
					})
					uni.hideLoading()
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		height: 100vh;
		color: #010101;
		font-size: 26rpx;
	}


	image {
		width: 126rpx;
		height: 126rpx;
	}

	.box {
		height: 800rpx;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;


	}

	.width-160 {
		width: calc(100% - 160rpx);
	}
</style>